<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>binding style</title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            .basic{
                width: 10px;
                height: 10px;
                background-color: red;
            }
            .happy{
                width: 20px;
                height: 20px;
                background-color: green;
            }
            .sad{
                width: 30px;
                height: 30px;
                background-color: blue;
            }
            .normal{
                width: 400px;
                height: 40px;
                background-color: yellow;
            }
            .win1{
                width: 50px;
                height: 50px;
                background-color: purple;
            }
            .win2{
                width: 60px;
                height: 60px;
                background-color: pink;
            }
            .win3{
                width: 70px;
                height: 70px;
                background-color: orange;
            }

        </style>
    </head>
    <body>
        
        <div id="root" class="basic" :class="a" @click="change">
            <!-- // 字符串语法 -->
            <div class="basic" :class="a" @click="change">
                test1
            </div>

            <br/><br/>
            <!-- // 数组语法 -->
            <div class="basic" :class="clasArr" @click="change">
                test2
            </div>
            <br/><br/>
            <!-- // 对象语法 -->
            <div class="basic" :class="clsObj" @click="change">
                test3
            </div>
            <br/><br/>
            <!-- 内联样式 -->
            <div class="basic" :style="{fontSize: fsize+'px'}" @click="change">
                test4
            </div>
            <br/><br/>
            <!-- 内联样式，对象写法 -->
            <div class="win1" :style="styObj" @click="change">
                test5
            </div>
        </div>
    </body>
    <script>
        const vm = new Vue({
            el: "#root",
            data:{
                a: 'normal',
                clasArr: ['win1','win2','win3'],
                clsObj:{
                    win1:true,//控制是否生效
                    win2:true,
                    win3:true,
                },
                fsize: 40,
                styObj:{
                    fontSize: '40px',
                    color: 'red',
                }
            },
            methods: {
                change(){
                    const arr = ['happy', 'sad', 'normal']
                    this.a = arr[Math.floor(Math.random()*3)]
                }
            },
        })
    </script>
</html>